<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>直播数据录入-OA办公系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" >



    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>直播数据录入</legend>
    </fieldset>

    <form class="layui-form" action="" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">请选择账号</label>
            <div class="layui-input-inline">
                <select name="mediaAccountId" id="mediaAccountId" lay-verify="required">
                    <option value="">请选择账号</option>
                    <option th:each="item:${mediaList}" th:value="${item.id}" th:text="${item.type+'--'+item.name}">radio</option>
                </select>
            </div>
        </div>
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">当前粉丝量</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="text" name="userCount" lay-verify="required|number" autocomplete="off" placeholder="当前粉丝量" class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">直播日期</label>
            <div class="layui-input-inline">
                <input type="text" name="liveDate" lay-verify="date" id="liveDate" autocomplete="off" placeholder="  "  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开播时间</label>
            <div class="layui-input-inline">
                <input type="text" name="startTime" lay-verify="required" id="startTime" autocomplete="off" placeholder="  "  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下播时间</label>
            <div class="layui-input-inline">
                <input type="text" name="endTime" lay-verify="required" id="endTime" autocomplete="off" placeholder="  "  class="layui-input">
            </div>
        </div>

        <div  class="layui-form-item">
            <label class="layui-form-label">本场直播效果</label>
            <div class="layui-input-block">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="150">

                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>观众总数</th>
                        <th>新增粉丝</th>
                        <th>评论人数</th>

                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <input type="text" name="viewCount" lay-verify="required|number" autocomplete="off" placeholder="观众总数" class="layui-input">
                        </td>
                        <td>
                            <input type="text" name="newUser" lay-verify="required|number" autocomplete="off" placeholder="新增粉丝" class="layui-input">
                        </td>
                        <td>
                            <input type="text" name="commentCount" lay-verify="required|number" autocomplete="off" placeholder="评论人数" class="layui-input">
                        </td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div  class="layui-form-item">
            <label class="layui-form-label">本场直播的观众来源</label>
            <div class="layui-input-block">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col width="200">
                    <col  width="200">
                    <col  width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>视频推荐</th>
                    <th>直播广场</th>
                    <th>同城</th>
                    <th>关注页</th>
                    <th>其他</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <input type="text" name="source1" lay-verify="number" placeholder="%" autocomplete="off" class="layui-input">
                    </td>
                    <td>
                        <input type="text" name="source2" lay-verify="number" placeholder="%" autocomplete="off" class="layui-input">
                    </td>
                    <td>
                        <input type="text" name="source3" lay-verify="number" placeholder="%" autocomplete="off" class="layui-input">
                    </td>
                    <td>
                        <input type="text" name="source4" lay-verify="number" autocomplete="off" placeholder="%" class="layui-input">
                    </td>
                    <td>
                        <input type="text" name="source5" lay-verify="number" autocomplete="off" placeholder="%" class="layui-input">
                    </td>

                    <td></td>
                </tr>
                </tbody>
            </table>
            </div>
        </div>
        <div  class="layui-form-item">
            <label class="layui-form-label">销售数据</label>
            <div class="layui-input-block">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="150">

                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>支付子订单数</th>
                        <th>支付金额</th>

                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <input type="text" name="orderCount" lay-verify="number" placeholder="" autocomplete="off" class="layui-input">
                        </td>
                        <td>
                            <input type="text" name="orderAmount" lay-verify="number" placeholder="￥" autocomplete="off" class="layui-input">
                        </td>

                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">分析总结</label>
            <div class="layui-input-block">
                <textarea placeholder="分析总结" name="summary" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">改进措施</label>
            <div class="layui-input-block">
                <textarea placeholder="改进措施" name="improvement" class="layui-textarea"></textarea>
            </div>
        </div>
        <!--<div class="layui-form-item layui-form-text">
          <label class="layui-form-label">编辑器</label>
          <div class="layui-input-block">
            <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
          </div>
        </div>-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
    <!-- end sp-wrapper -->
    <script>
        layui.use(['laydate', 'form'], function () {
            var laydate = layui.laydate;
            var form = layui.form;
            var layer = layui.layer;

            //执行一个laydate实例
            laydate.render({
                elem: '#liveDate' //指定元素
            });


            //时间选择器
            laydate.render({
                elem: '#startTime'
                ,type: 'time'
            });
            laydate.render({
                elem: '#endTime'
                ,type: 'time'
            });

            //日期范围
            laydate.render({
                elem: '#reportPeriod'
                ,range: true
            });

            //自定义验证规则
            form.verify({
                dataInput: [
                    /(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/
                    ,'日期格式不正确'
                ],
                numberInput:[/(^$)|^\d+$/,'只能填写数字'],
            });

            // //监听提交
            // form.on('submit(demo1)', function(data){
            //     // layer.alert(JSON.stringify(data.field), {
            //     //     title: '最终的提交信息'
            //     // })
            //     return true;
            // });
        });
    </script>

</div>
</body>
<html>
